<template>
	<div>
		<div class="search-top">
			<van-icon name="arrow-left" @click="goHome" />
			<van-search @update:model-value="mentValue" v-model="inputValue" placeholder="请输入搜索关键词" />
			<van-button round size="small" type="danger" @click="clickSearch">搜索</van-button>
		</div>
		<div class="history">
			<p>搜索记录</p>
			<div class="history-search">
				<span v-for="(it,index) in searchHistory" :key="index">{{ it }}</span>
			</div>
		</div>
		<div class="search-content">
			<van-card v-for="it in searchList"
				@click="bindId(it)"
                :tag=it.sc?it.sc:it.like
                :price=it.dur?it.dur:it.price
                :desc=it.star?it.star:it.ipRightName
                :title=it.name
                :thumb="`/api${it.img?it.img:it.itemsImg}`" >
                <template #tags>
                    <van-tag plain type="danger" v-for="item in it.ver">{{item}}</van-tag>
                </template>   
            </van-card>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import { getFilmList, getPeripheryList, getExhibitionList } from '../../api/homeApi'
import { useCounterStore } from '../../stores/users'

const store = useCounterStore()
let monveId = ref([])
const inputValue = ref('')
const router = useRouter()
// 总数据
const searchList = ref([])
// 定义数据变量
let filmList = ref([]) // 电影
let peripheryList = ref([]) // 周边
let exhibitionList = ref([]) // 漫展
// 历史搜索
let searchHistory = ref([])
// 搜索
function clickSearch() {
	historyList()
	searchList.value = []
	if (!inputValue.value) {
		Toast({
			message: '请输入搜索内容',
			position: 'top'
		})
	} else {
		getSearch(inputValue.value)
	}
}
// 历史搜索数据
function historyList(){
		store.setSearchInput(inputValue.value)
		searchHistory.value = JSON.parse(localStorage.getItem('searchInput')).searchInput
		// console.log(searchHistory.value);
	}
function mentValue(){
	if (!inputValue.value) {
		searchList.value = []
	}
}

// 跳转详情
function bindId(it) {
	monveId = it.id
	router.push({ path: '/details', query: { id: monveId } })
}
// 搜索数据
function getSearch(inputValue) {
	
	searchList.value=[...filmList.value,...peripheryList.value]
	let list = searchList.value.filter(it=>{
		// console.log(it.name);

        if(it.name.indexOf(inputValue)!=-1){
            return it
        }
		// else if(it.name.indexOf(inputValue)==-1){
		// 	// console.log(it.name.indexOf(inputValue));
        //     Toast({
        //         message: '没有与之匹配的内容',
        //         position: 'top',
        //     });
        // }
		// console.log(it.name?it.name:it.project_name);
    })
	// console.log(list);
    searchList.value = list
	// console.log(searchList.value);

}
// 电影
const getFilm = async () => {
	const data = await getFilmList(1, 30)
	if (data.code === 200) {
		filmList.value = data.data.rows
		// console.log(filmList.value)
	}
}
// 周边
const getPeriphery = async () => {
	const data = await getPeripheryList(1, 10)
	if (data.code === 200) {
		peripheryList.value = data.data.rows
	console.log(peripheryList.value)
	}
}
// 漫展
const getExhibition = async () => {
	const data = await getExhibitionList(1, 10)
	if (data.code === 200) {
		exhibitionList.value = data.data.rows
		// console.log(exhibitionList.value)
	}
}
onMounted(() => {
	getFilm()
	getPeriphery()
	getExhibition()
	// historyList()
	
})
// 返回
const goHome = () => {
	router.push('/home')
}

</script>

<style lang="scss" scoped>
.search-top {
	background: #fff;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	border-bottom: 1px solid #d1d1d1;
	position: sticky;
    top: 0;
    z-index: 9;
}
.history {
	width: calc(100% - 60px);
	margin: auto;
	padding: 15px 0 15px 15px;

	p {
	}
	.history-search {
		margin-top: 10px;
		// display: flex;
		// flex-wrap: wrap;
		// justify-content: space-between;
		span {
			height: 22px;
			line-height: 22px;
			border-radius: 5px;
			font-size: 16px;
			margin-left: 10px;
			margin-top: 5px;
			color: #999999;
			border: 1px solid #a7a7a7;
		}
	}
}
.search-content{
	width: calc(100% - 20px);
	margin: auto;
	padding: 5px 0 0 5px;

}
</style>
